<template>
    <div class="set-sets">
        <title-box style="height:55px;" title="基本属性"></title-box>
        <el-card>
            <el-form ref="ruleForm" :model="form" :rules="rules">
                <div class="form-item-box">
                    <el-col :span="3"></el-col>
                    <el-col :span="11"><el-form-item label="负责人:">{{'张三'}}</el-form-item></el-col>
                    <el-col :span="10"><el-form-item label="状态:">{{'成功'}}</el-form-item></el-col>
                </div>
                <div class="form-item-box">
                    <el-col :span="3"></el-col>
                    <el-col :span="11">
                        <el-form-item label="项目名称:">
                            <el-input clearable placeholder="请输入项目名称" v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10"><el-form-item label="创建日期:">{{'2018-12-12 21:44:45'}}</el-form-item></el-col>
                </div>
                <div class="form-item-box">
                    <el-col :span="3"></el-col>
                    <el-col :span="11">
                        <el-form-item label="项目描述:">
                            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" clearable placeholder="请输入项目描述" v-model="form.desc"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10"></el-col>
                </div>
                <div class="form-item-box">
                    <el-col :span="16"></el-col>
                    <el-col :span="8"><el-button type="primary">保存</el-button></el-col>
                </div>
            </el-form>
        </el-card>
        <title-box title="删除项目"></title-box>
        <el-card>
            <div class="s-s-tips">
                <el-col :span="3"><i style="color:#f56c6c;" class="el-icon-warning"></i></el-col>
                <el-col :span="13">项目删除后就再也不可恢复了，请谨慎操作！</el-col>
                <el-col :span="8"><el-button type="danger" @click="removeData.show=true">危险按钮</el-button></el-col>
            </div>
        </el-card>
        <title-box title="转让项目"></title-box>
        <el-card>
            <div class="s-s-tips">
                <el-col :span="3"><i style="color:#e6a23c;" class="el-icon-warning"></i></el-col>
                <el-col :span="13">项目转让后就再也不可恢复了，请谨慎操作！</el-col>
                <el-col :span="8"><el-button type="warning" @click="giveData.show=true">警告按钮</el-button></el-col>
            </div>
        </el-card>
        <give-tips @confirm="giveConfirm" :giveData="giveData"></give-tips>
        <remove-tips @confirm="removeConfirm" :removeData="removeData"></remove-tips>
    </div>
</template>
<script>
import TitleBox from '@/components/TitleBox'
import GiveTips from './GiveTips'
import RemoveTips from './RemoveTips'
export default {
    name: 'SetSets',
    components: { TitleBox, GiveTips, RemoveTips },
    data () {
        return {
            giveData: {
                show: false,
                userList: [
                    { value: '0', label: '撒地方1' },
                    { value: '1', label: '撒地2' },
                    { value: '2', label: '撒地3' },
                    { value: '3', label: '撒地方4' }
                ],
                nameList: [
                    { value: '0', label: '撒地方1' },
                    { value: '1', label: '撒地2' },
                    { value: '2', label: '撒地3' },
                    { value: '3', label: '撒地方4' }
                ]
            },
            removeData: {
                show: false
            },
            form: {
                name: '',
                code: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        giveConfirm () {
            this.giveData.show = false
        },
        removeConfirm () {
            this.removeData.show = false
        }
    }
}
</script>
<style lang="less">
    .set-sets {
        .s-s-tips {
            display: flex;
        }
        .el-col {
            display: flex;
            align-items: center;
        }
        .el-col-3 {
            justify-content: flex-end;
            padding-right: 5px;
            box-sizing: border-box;
            i {
                font-size: 20px;
            }
        }
        .form-item-box {
            display: flex;
        }
    }
</style>
